<template>
  <div>
    <h2>ECharts 折线图</h2>
    <div ref="lineChart" style="width: 100%; height: 320px;"></div>
    <h2 style="margin-top: 32px;">ECharts 柱状图</h2>
    <div ref="barChart" style="width: 100%; height: 320px;"></div>
    <h2 style="margin-top: 32px;">ECharts 饼图</h2>
    <div ref="pieChart" style="width: 100%; height: 320px;"></div>
    <h2 style="margin-top: 32px;">ECharts 雷达图</h2>
    <div ref="radarChart" style="width: 100%; height: 320px;"></div>
    <h2 style="margin-top: 32px;">ECharts 散点图</h2>
    <div ref="scatterChart" style="width: 100%; height: 320px;"></div>
    <h2 style="margin-top: 32px;">ECharts 仪表盘</h2>
    <div ref="gaugeChart" style="width: 100%; height: 320px;"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

const lineChart = ref(null)
const barChart = ref(null)
const pieChart = ref(null)
const radarChart = ref(null)
const scatterChart = ref(null)
const gaugeChart = ref(null)

onMounted(() => {
  // 折线图
  echarts.init(lineChart.value).setOption({
    title: { text: '一周访问量' },
    tooltip: {},
    xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
    yAxis: {},
    series: [{
      name: '访问量',
      type: 'line',
      data: [150, 230, 224, 218, 135, 147, 260]
    }]
  })

  // 柱状图
  echarts.init(barChart.value).setOption({
    title: { text: '各城市销量' },
    tooltip: {},
    xAxis: { data: ['北京', '上海', '广州', '深圳', '杭州'] },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [320, 452, 301, 334, 390],
      itemStyle: { color: '#73c0de' }
    }]
  })

  // 饼图
  echarts.init(pieChart.value).setOption({
    title: { text: '访问来源', left: 'center' },
    tooltip: { trigger: 'item' },
    legend: { orient: 'vertical', left: 'left' },
    series: [
      {
        name: '来源',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: '搜索引擎' },
          { value: 735, name: '直接访问' },
          { value: 580, name: '邮件营销' },
          { value: 484, name: '联盟广告' },
          { value: 300, name: '视频广告' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })

  // 雷达图
  echarts.init(radarChart.value).setOption({
    title: { text: '个人技能雷达' },
    tooltip: {},
    legend: { data: ['张三', '李四'] },
    radar: {
      indicator: [
        { name: '前端', max: 100 },
        { name: '后端', max: 100 },
        { name: '算法', max: 100 },
        { name: '运维', max: 100 },
        { name: '产品', max: 100 }
      ]
    },
    series: [{
      name: '技能对比',
      type: 'radar',
      data: [
        { value: [90, 80, 70, 60, 85], name: '张三' },
        { value: [60, 85, 90, 70, 60], name: '李四' }
      ]
    }]
  })

  // 散点图
  echarts.init(scatterChart.value).setOption({
    title: { text: '身高体重分布' },
    xAxis: { name: '身高(cm)' },
    yAxis: { name: '体重(kg)' },
    tooltip: {},
    series: [{
      symbolSize: 16,
      data: [
        [170, 65], [168, 60], [175, 75], [180, 80], [160, 50], [172, 68], [178, 72]
      ],
      type: 'scatter',
      itemStyle: { color: '#fac858' }
    }]
  })

  // 仪表盘
  echarts.init(gaugeChart.value).setOption({
    title: { text: 'CPU 使用率' },
    series: [
      {
        type: 'gauge',
        progress: { show: true },
        detail: { valueAnimation: true, formatter: '{value}%' },
        data: [{ value: 56, name: '使用率' }]
      }
    ]
  })
})
</script> 